<script>
import citys from '@/assets/citydata'

export default {
  data() {
    return {
      stationData: {
        pageNum: 1,
        pageSize: 5,
        courierStationName: '',
        communityName: '',
        courierStationStatus: '',
        startTime: '',
        endTime: ''
      },
      date: '',
      stationDataList: [],
      total: 1,
      dialogFormVisible: false,
      title: '添加驿站',
      address: [],
      citys: citys,
      station: {
        courierStationAddress: "",
        courierStationCity: "",
        courierStationCommunityId: 1010253,
        courierStationDistrict: "",
        courierStationImage: "",
        courierStationName: "",
        courierStationProvince: ""
      },
      stationUpdate: {
        addTime: "",
        courierStationAddress: "",
        courierStationCity: "",
        courierStationCommunityId: 1010398,
        courierStationCommunityName: "",
        courierStationDistrict: "",
        courierStationId: 1010756,
        courierStationImage: "",
        courierStationName: "",
        courierStationOrderCount: 0,
        courierStationProvince: "",
        courierStationSort: 1,
        courierStationStatus: 1
      },
      communityData:{
        name:'',
        pageNum:1,
        startTime:'',
        endTime:'',
        pageSize: 9999,
        communityName:''
      },
      communityDataList:[],
      courierStationName: '',
    }
  },
  methods: {
    //获取小区信息
    getCommunityData() {
      this.$http.get('community/communityList',{params:this.communityData})
          .then(res=>{
            this.communityDataList=res.data.data.list
          })
          .catch(error=>{
            this.$message.error('接口异常！')
          })
    },
    //修改上下架状态
    changeStatue(bb){
      this.stationUpdate=bb;
      bb.courierStationStatus===1 ? this.stationUpdate.courierStationStatus= 0:this.stationUpdate.courierStationStatus= 1;
      this.$http.post('courierStation/modifyCourierStation',this.stationUpdate)
          .then(res=>{
            if(res.data.status==200){
              this.$message.success('操作成功')
              this.getStationMessage()
              // console.log(this.stationDataList)
              // console.log( this.stationUpdate)
            }

          })
    },
    //修改数据
    updateData(row) {
      this.title = "编辑驿站信息"
      this.dialogFormVisible = true;
      this.stationUpdate = row;
      // this.stationUpdate.courierStationName=this.communityDataList.communityName
      console.log(this.stationUpdate)
      // this.getCommunityData()
      this.address = [this.stationUpdate.courierStationProvince, this.stationUpdate.courierStationCity, this.stationUpdate.courierStationDistrict];
    },
    //添加修改窗口的取消按钮
    cancle() {
      this.station = {
        courierStationAddress: "",
        courierStationCity: "",
        courierStationCommunityId: 1010253,
        courierStationDistrict: "",
        courierStationImage: "",
        courierStationName: "",
        courierStationProvince: ""
      }
      this.address = [];
      this.dialogFormVisible = false;
      this.getStationMessage()
    },
    // 添加修改窗口的确定按钮
    addButton() {
      if (this.title == '添加驿站') {
        this.$http.post('courierStation/addCourierStation', this.stationUpdate)
            .then(res => {
              if (res.data.status == 200) {
                this.$message.success('添加成功！')
                this.getStationMessage();
                this.cancle()
              } else {
                this.$message.error('添加失败！')
              }
            })
      } else if (this.title == '编辑驿站信息') {
        this.$http.post('courierStation/modifyCourierStation',this.stationUpdate)
            .then(res => {
              if (res.data.status == 200) {
                this.$message.success('修改成功！')
                this.getStationMessage();
                this.cancle();
              } else {
                this.$message.error('修改失败！')
              }
            })
      }

    },
    handleSizeChange(val) {
      this.stationData.pageSize = val;
      this.getStationMessage()
    },
    handleCurrentChange(val) {
      this.stationData.pageNum = val;
      this.getStationMessage()
    },
    addStation() {
      this.dialogFormVisible = true;
      this.title = "添加驿站";
    },
    getStationMessage() {
      this.$http.get('courierStation/querySearchCourierStationList', {params: this.stationData})
          .then(res => {
            if (res.data.status == 200) {
              this.stationDataList = res.data.data.list;
              this.total = res.data.data.total;
            } else {
              this.$message.error('数据传入出错！')
            }
          })
          .catch(error => {
            this.$message.error('接口出错！')
          })
    }
  },
  mounted() {
    this.getStationMessage();
    this.getCommunityData()
  },
  watch: {
    date() {
      if (this.date) {
        // console.log(this.date)
        this.stationData.startTime = this.date[0];
        this.stationData.endTime = this.date[1];
      } else {
        this.$message.error('时间数据异常！')
      }
    },
    address() {
      // console.log(this.address)
      if (this.address) {
        this.station.courierStationProvince = this.address[0];
        this.station.courierStationCity = this.address[1];
        this.station.courierStationDistrict = this.address[2];
      } else {
        this.$message.error('位置数据异常！')
      }
    }
  }
}
</script>

<template>
  <div>
    <!--  面包屑  表头-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
      <el-breadcrumb-item>小区管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <!--    inline行列样式，行列平铺    -->
      <el-form :inline="true" :model="stationData" class="demo-form-inline" style="margin-top: 15px">
        <el-form-item label="驿站名称：">
          <el-input v-model="stationData.courierStationName" clearable @clear="getStationMessage"
                    placeholder="请输入驿站名称"></el-input>
        </el-form-item>
        <el-form-item label="小区名称：">
          <el-input v-model="stationData.communityName" clearable @clear="getStationMessage"
                    placeholder="请输入小区名称"></el-input>
        </el-form-item>
        <el-form-item label="添加时间：">
          <el-date-picker
              v-model="date"
              end-placeholder="结束日期"
              range-separator="至"
              start-placeholder="开始日期"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" plain @click="getStationMessage">查 询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!--  添加驿站  -->
    <el-row>
      <el-button type="warning" plain @click="addStation">新增驿站</el-button>
    </el-row>
    <!-- 数据表格   -->
    <el-table border :data="stationDataList" style="width: 100%; margin-top: 10px; margin-bottom: 10px">
      <el-table-column label="ID" prop="courierStationId" align="center"></el-table-column>
      <el-table-column label="驿站名字" prop="courierStationName" align="center"></el-table-column>
      <el-table-column label="驿站照片" prop="courierStationImage" align="center"></el-table-column>
      <el-table-column label="驿站地址" prop="courierStationAddress" align="center"></el-table-column>
      <el-table-column label="所在小区" prop="courierStationCommunityName" align="center"></el-table-column>
      <el-table-column label="订单总数" prop="courierStationSort" width="180px" align="center"></el-table-column>
      <el-table-column label="添加时间" prop="addTime" width="180px" align="center"></el-table-column>
      <el-table-column label="状态" prop="courierStationStatus" width="180px" align="center">
        <template slot-scope="scope">
          <el-button type="success" v-show="scope.row.courierStationStatus==1" plain>上架</el-button>
          <el-button type="danger" v-show="scope.row.courierStationStatus==0" plain>下架</el-button>
<!--          {{scope.row.courierStationStatus}}-->
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-link type="warning" v-show="scope.row.courierStationStatus==0" :underline="false" @click="changeStatue(scope.row)">上架</el-link>&nbsp;
          <el-link type="warning" v-show="scope.row.courierStationStatus==1" :underline="false" @click="changeStatue(scope.row)">下架</el-link>&nbsp;
          <el-link type="warning" :underline="false" @click="updateData(scope.row)">编辑</el-link>
<!--          {{scope.row}}-->
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="stationData.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="stationData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-row>
    <!--  弹出框  -->
    <!--  弹出框  -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="stationUpdate">
        <el-form-item label="驿站名字" label-width="100px">
          <el-input v-model="stationUpdate.courierStationName" autocomplete="off" placeholder="请输入驿站名字"></el-input>
        </el-form-item>
        <el-form-item label="具体地址" label-width="100px">
          <el-cascader
              v-model="address"
              :options="citys"
              placeholder="请选择省市县"></el-cascader>
        </el-form-item>
        <el-form-item label="" label-width="100px">
          <el-input v-model="stationUpdate.courierStationAddress" autocomplete="off" placeholder="请填写详细地址"></el-input>
        </el-form-item>
<!--        搜索下拉框-->
        <el-form-item label="所在小区" label-width="100px">
          <el-select v-model="stationUpdate.courierStationCommunityId" filterable placeholder="请选择">
            <el-option
                v-for="item in communityDataList"
                :key="item.communityId"
                :label="item.communityName"
                :value="item.communityId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="addButton">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>